<template>
	<div>
		<APPMenuTop
			v-if="mode === 'TOP'"
			@menuClick="handleMenuClick"
			v-bind="$props"
		>
			<template v-slot:[slotName]="{ item }" v-for="slotName of slotKeys">
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</APPMenuTop>
		<AppMenuMiddle
			v-else-if="mode === 'CENTER'"
			v-bind="$props"
			@menuClick="handleMenuClick"
		>
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuMiddle>
		<AppMenuTabLeft
			v-else-if="mode === 'TABEXP_LEFT' || mode === 'TREEEXP'"
			@menuClick="handleMenuClick"
			v-bind="$props"
		>
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuTabLeft>
		<AppMenuTabRight
			v-else-if="mode === 'TABEXP_RIGHT'"
			@menuClick="handleMenuClick"
			v-bind="$props"
		>
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuTabRight>
		<AppMenuTabTop
			v-else-if="mode === 'TABEXP_TOP'"
			@menuClick="handleMenuClick"
			v-bind="$props"
		>
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuTabTop>
		<AppMenuTabBottom
			v-else-if="mode === 'TABEXP_BOTTOM'"
			@menuClick="handleMenuClick"
			v-bind="$props"
		>
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuTabBottom>
		<AppMenuDefault v-else @menuClick="handleMenuClick" v-bind="$props">
			<template
				v-slot:[slotName]="{ item, counterData }"
				v-for="slotName of slotKeys"
			>
				<slot :name="slotName" :item="item" :counterData="counterData"> </slot>
			</template>
		</AppMenuDefault>
	</div>
</template>
<script setup lang="ts">
import AppMenuDefault from './components/menu-default.vue';
import APPMenuTop from './components/menu-top.vue';
import AppMenuMiddle from './components/menu-middle.vue';
import AppMenuTabLeft from './components/menu-tab-left.vue';
import AppMenuTabRight from './components/menu-tab-right.vue';
import AppMenuTabTop from './components/menu-tab-top.vue';
import AppMenuTabBottom from './components/menu-tab-bottom.vue';
import { MenuProps } from './menu';
const props = defineProps(MenuProps);
const slotKeys = Object.keys(useSlots());
const emit = defineEmits(['menuClick']);
const handleMenuClick = (key: string): void => {
	emit('menuClick', key);
};
</script>
